<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<login></login>
			<mycom></mycom>
		</div>

		<div id="app1">
			<login></login>
		</div>
		
		<template id="tmpl">
			<h3>私有组件</h3>
		</template>
		<script type="text/javascript">
//			var login={template:"<h3>私有组件2</h3>"}
//			new Vue({
//				el:"#app1",
//				components:{
//					login
//				}
//			})
			
			
			Vue.component('mycom',{
				template:'<h3>数据不见了----{{msg}}</h3>',
				data:function(){
					return {
						msg:"数据在这里，组件自己的data定义的数据"
					}
				}
			})
			
			new Vue({
				el:"#app",
				components:{
					login:{
						template:"#tmpl"
					}
				}
			})
			
			new Vue({
				el:"#app1",
				components:{
					login:{
						template:"<h3>私有组件2</h3>"
					}
				}
			});
		</script>
	</body>
</html>
